@const BUTTON-RAISED-BACK-COLOR: #26a69a;
@const BUTTON-RAISED-FORE-COLOR: #fff;
@const BUTTON-RAISED-HOVER-BACK-COLOR: #2bbbad;
@const BUTTON-RAISED-ACTIVE-BACK-COLOR: #8BDAD2;
@const BUTTON-RAISED-DISABLED-BACK-COLOR: #DFDFDF;
@const BUTTON-RAISED-DISABLED-FORE-COLOR: #555;


@const BUTTON-FLAT-FORE-COLOR: #26a69a;
@const BUTTON-FLAT-BACK-COLOR: transparent;
@const BUTTON-FLAT-HOVER-BACK-COLOR: #F4F4F4;
@const BUTTON-FLAT-ACTIVE-BACK-COLOR: #DFDFDF;
@const BUTTON-FLAT-DISABLED-FORE-COLOR: #AFAFAF;

@mixin UI-FONT {
  font-family : "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 12pt;
  font-weight: 700;
  font-rendering-mode:snap-pixel;
}

button { style-set: md-button; }

@set md-button < std-button-base
{
  :root
  { 
    @UI-FONT;
    aspect: "MD.Wave" url(md.tis); 
    color:@BUTTON-FLAT-FORE-COLOR;
    background:@BUTTON-FLAT-BACK-COLOR; 
    padding:0 1em;     
    line-height:2em;
  }
      
  :root[role="default-button"]    { background: @BUTTON-FLAT-BACK-COLOR; }
  :root:hover                     { background: @BUTTON-FLAT-HOVER-BACK-COLOR; }
  :root:focus                     { background: @BUTTON-FLAT-BACK-COLOR; }
  :root:active:not(:animating)    { background: @BUTTON-FLAT-ACTIVE-BACK-COLOR; }
  :root:active                    { -active-color: @BUTTON-FLAT-ACTIVE-BACK-COLOR; }
  :root:disabled                  { background: @BUTTON-FLAT-BACK-COLOR; color: @BUTTON-FLAT-DISABLED-FORE-COLOR; }
  :root:tab-focus                 { outline:1dip dashed @BUTTON-FLAT-FORE-COLOR -4dip; /* inside */ }

  :root.raised                           { background: @BUTTON-RAISED-BACK-COLOR; color: @BUTTON-RAISED-FORE-COLOR; 
                                           box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3); }
  :root.raised[role="default-button"]    { background: @BUTTON-RAISED-BACK-COLOR; }
  :root.raised:hover                     { background: @BUTTON-RAISED-HOVER-BACK-COLOR; }
  :root.raised:focus                     { background: @BUTTON-RAISED-HOVER-BACK-COLOR; }
  :root.raised:active:not(:animating)    { background: @BUTTON-RAISED-ACTIVE-BACK-COLOR; }
  :root.raised:active                    { box-shadow:none; -active-color: @BUTTON-RAISED-ACTIVE-BACK-COLOR; }
  :root.raised:disabled                  { background: @BUTTON-RAISED-BACK-COLOR; color: BUTTON-RAISED-DISABLED-FORE-COLOR; }
  :root.raised:tab-focus                 { outline:1dip dashed @BUTTON-RAISED-FORE-COLOR -4dip; /* inside */ }

}

@set md-edit < std-edit-base
{
  :root {
    @UI-FONT;
    color:@WINDOWTEXT;
    background: transparent;
    border:1dip solid @THREEDBORDER;
    text-selection: @WINDOWTEXT @THREEDFACE;
    padding:0.2em 1em;     
    line-height:1.8em;
  }
  
  :root:owns-popup,
  :root:focus            {  text-selection: @HIGHLIGHTTEXT @HIGHLIGHT; }
  :root:disabled         {  background:@THREEDFACE;  color:@GRAYTEXT; }
  :root:tab-focus        { outline:@STD-OUTLINE-FOCUS; }  
}
